/*
 * @Author: hongbin
 * @Date: 2021-11-12 08:45:03
 * @LastEditors: hongbin
 * @LastEditTime: 2021-11-13 12:15:01
 * @Description: 数据库的collection 侧边栏
 */
import { List, ListItem } from "@mui/material";
import styled from "styled-components";
import { FC, ReactElement, useState } from "react";
import { Collection, Collections } from "../../api/types";
import { SideContainer } from "../DatabaseSide";
import { ArrowDropDown, ArrowRight } from "@mui/icons-material";
import IdIndex from "./IdIndex";
import ElongateLine from "../ElongateLine";

interface IProps {
  collections: Collections;
  onDoubleClick: (collection: string) => void;
}

const CollectionSide: FC<IProps> = ({
  collections,
  onDoubleClick,
}): ReactElement => {
  return (
    <SideContainer hideBefore>
      <List>
        <DeepColourTitle>集合</DeepColourTitle>
        {collections.map(collection => (
          <CollectionItem
            key={collection.name}
            collection={collection}
            onDoubleClick={onDoubleClick}
          />
        ))}
      </List>
      <ElongateLine />
    </SideContainer>
  );
};

export default CollectionSide;

interface CollectionItemProps {
  collection: Collection;
  onDoubleClick: (collection: string) => void;
}

const MyListItem = styled(ListItem)`
  display: flex;
  flex-direction: column;
  width: 100%;
  & > div:first-child {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    transition: var(--transition-duration) linear;
    transition-property: color, background-color;
    :hover {
      background-color: ${props => props.theme.palette.primary.light};
      color: ${props => props.theme.palette.background.default};
    }
  }
`;

const CollectionItem: FC<CollectionItemProps> = ({
  collection: { name, idIndex },
  onDoubleClick,
}) => {
  const [open, setOpen] = useState(false);
  return (
    <MyListItem>
      <div onDoubleClick={() => onDoubleClick(name)}>
        {open ? (
          <ArrowDropDown onClick={() => setOpen(false)} />
        ) : (
          <ArrowRight onClick={() => setOpen(true)} />
        )}
        {name}
      </div>
      {open ? <IdIndex idIndex={idIndex} /> : null}
    </MyListItem>
  );
};

export const DeepColourTitle = styled.span<{ size?: string }>`
  color: ${props => props.theme.palette.grey[500]};
  width: 100%;
  display: block;
  padding: 0.5rem 0;
  text-align: center;
  ${props => (props.size ? "font-size: " + props.size : undefined)};
`;
